<template>
    <div class="register-container">
      <el-form ref="registerForm" :model="registerForm" label-width="120px" class="custom-form">
        <el-form-item prop="phone" required label="手机号">
          <el-input v-model="registerForm.phone" placeholder="请输入手机号" inputmode="numeric"></el-input>
        </el-form-item>
        <el-form-item prop="verificationCode" required label="验证码">
  <el-row>
    <el-col :span="18">
      <el-input v-model="registerForm.verificationCode" placeholder="请输入验证码" inputmode="numeric" style="width: calc(100% - 60px);"></el-input>
    </el-col>
    <el-col :span="6" class="verification-code-container">
      <el-button type="primary" @click="getVerificationCode" class="verification-button" style="width: calc(100% - 20px);">获取验证码</el-button>
    </el-col>
  </el-row>
</el-form-item>
        <el-form-item>
          <el-button type="success" @click="register" class="register-button">立即注册</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="registerForm.agreed">我已阅读并同意<a href="#service-terms" class="terms-link">服务条款</a>和<a href="#privacy-policy" class="privacy-link">隐私协议</a></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" href="/login" class="login-link">老用户了？直接登录</el-link>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElForm, ElFormItem, ElInput, ElButton, ElCheckbox, ElRow, ElCol, ElLink } from 'element-plus';
  
  const registerForm = ref({
    phone: '',
    verificationCode: '',
    agreed: false,
  });
  
  const getVerificationCode = () => {
    // 这里应该是获取验证码的逻辑
    console.log('获取验证码');
  };
  
  const register = () => {
    // 这里应该是注册的逻辑
    console.log('注册');
  };
  </script>
  
  <style scoped>
  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .custom-form {
    width: 100%;
  }
  
  .el-form-item {
    margin-bottom: 24px;
  }
  
  .el-input {
    border-radius: 4px;
    border: none;
    border-bottom: 2px solid #dcdcdc;
    padding: 10px 0;
    font-size: 16px;
  }
  
  .verification-button {
    margin-top: 0; /* 调整为0，因为已经在布局中处理了垂直对齐 */
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    background-color: #409EFF;
    color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .verification-button:hover {
    background-color: #66b1ff;
  }
  
  .register-button {
    width: 100%;
    padding: 12px 0;
    font-size: 18px;
    border-radius: 4px;
    background-color: #67c23a;
    color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .register-button:hover {
    background-color: #85ce61;
  }
  
  .terms-link, .privacy-link {
    color: #409EFF;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .terms-link:hover, .privacy-link:hover {
    color: #66b1ff;
  }
  
  .login-link {
    color: #409EFF;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 16px;
  }
  
  .login-link:hover {
    color: #66b1ff;
  }
  
  .verification-code-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
  }
  .verification-button {
  width: calc(100% - 5px);
  font-size: 10px; /* 设置字体大小 */
}
  
  @media (max-width: 320px) {
    .register-container {
      padding: 16px;
    }
  
    .el-form-item {
      margin-bottom: 16px;
    }
  
    .verification-button, .register-button {
      font-size: 14px;
      padding: 8px 16px;
    }
  }
  </style>